<template>
  <view>
    <u-gap height="20"></u-gap>
    <view class="wrap ml26 mr23">
      <view class="">
        <view class="item">
          <view class="flex-between flex-align">
            <view class="left">头像</view>
            <view class="right flex-align" @click="changeAvatar">
              <view class="msg">
                <image
                  :src="userInfo.avatar"
                  mode=""
                  style="width: 50rpx; height: 50rpx"
                >
                </image>
                <!-- 								<u-avatar size='30'
									src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8f7e1d02-dcb1-46ba-90db-ae32fea44f22/4b2bf3e5-68ad-4a15-b0d1-00b7a5246eab.png">
								</u-avatar> -->
              </view>
              <view class="">
                <u-icon name="arrow-right" mp-avatar="true"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="item">
          <view class="flex-between flex-align">
            <view class="left">昵称</view>
            <view class="" v-if="nameShow === false">
              <input
				value=""
                @blur="blur"
				v-model="inputValue"
                type="text"
                placeholder=" "
                focus="true"
                ref="ref"
              />
            </view>
            <view class="right flex-align" @click="changeName">
              <view class="msg" v-if="nameShow === true">
                {{ userInfo.unickname }}
              </view>
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="item">
          <view class="flex-between flex-align">
            <view class="left">手机号码</view>
            <view class="right flex-align">
              <view class="msg">{{ userInfo.phone }}</view>
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="" style="height: 8rpx"> </view>

        <view class="item" @click="$pub.go('/pages_my/myFamily/myFamily')">
          <view class="flex-between flex-align">
            <view class="left">家人管理</view>
            <view class="right flex-align">
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="item" @click="$pub.go('/pages_my/dangan/dangan')">
          <view class="flex-between flex-align">
            <view class="left">健康档案</view>
            <view class="right flex-align">
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="item" @click="$pub.go('/pages_my/myAddress/myAddress')">
          <view class="flex-between flex-align">
            <view class="left">地址管理</view>
            <view class="right flex-align">
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="item">
          <view class="flex-between flex-align">
            <view class="left">我的医保卡</view>
            <view class="right flex-align" @click="preImg">
              <image
                class="mr5"
                src="/static/img/my/04-erweima.png"
                mode="heightFix"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <view class="">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState, //先导入mapState方法
  mapMutations,
  mapActions,
} from "vuex";

// import {
// 	getUserInfo
// } from "@/utils/auth.js";
import base from "@/utils/env.js";
export default {
  data() {
    return {
		inputValue:'',
		
		
      // imgData: null,
      // user: "小明",
      // aa: "",
      // src: "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg",
      // show: false,
      // columns: [
      // 	["男", "女"]
      // ],
      show2: false,
      value2: Number(new Date()),
      /* 男女显示 */
      sexShow: "",

      /* 输入框切换 */
      nameShow: true,
      /*  */
      changeInfo: {
        avatar: "",
        createTime: "",
        delFlag: "",
        jiedanstatus: "",
        phone: "",
        status: "",
        ubirthday: 0,
        ulastlogtime: 0,
        uloginname: "",
        ulogins: 0,
        unickname: "",
        upaserrnum: 0,
        upaserrtime: 0,
        upassword: "",
        updateTime: "",
        userid: "",
        username: "",
        usex: "",
        uweixin: "",
      },
    };
  },
  onNavigationBarButtonTap() {
    this.shareData();
  },
  methods: {
    ...mapActions("user", ["setUserInfoAction", "wxGetUserInfo"]),
    ...mapMutations("m_user", ["getUserInfo"]),
    shareData() {
      let that = this;
      // uni.share({
      // 	provider: "weixin",
      // 	scene: "WXSceneTimeline",
      // 	type: 2,
      // 	imageUrl: "https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
      // 	imageUrl: imgData,
      // 	imageUrl: that.imgData,
      // 	success: function(res) {
      // 		console.log("success:" + JSON.stringify(res));
      // 	},
      // 	fail: function(err) {
      // 		console.log("fail:" + JSON.stringify(err));
      // 	},
      // });

      // uni.share({
      // 	provider: "weixin",
      // 	scene: "WXSceneSession",
      // 	type: 1,
      // 	summary: `分享${user}的个人主页`,
      // 	success: function(res) {
      // 		console.log("success:" + JSON.stringify(res));
      // 	},
      // 	fail: function(err) {
      // 		console.log("fail:" + JSON.stringify(err));
      // 	}
      // });
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession", //表示发送给朋友
        type: 0,
        href: "https://ibaotu.com/tupian/beijing.html",
        title: "医健通",
        summary: "医健通是一款互联网医院App",
        imageUrl: "http://yijiantongadmin.cskc.com/app/",
        // imageUrl: "http://192.168.3.90:8090/profile/2023/06/09/20230609164205A001.png",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    preImg(indexx, urlss) {
      let index = 1;
      let urls = [
        "https://img2.baidu.com/it/u=2499112433,1406976051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      ];
      console.log(urls, "preImg");
      uni.previewImage({
        current: index, //预览图片的下标
        urls: urls, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      });
    },
    changeUser() {
      this.setUserInfoAction();
    },
    async setUserInfoAction(data) {
      await this.$API.userApi.changeUserInfo(data);
    },
    changeAvatar() {
      console.log("更换头像");
      var that = this;
      uni.chooseMedia({
        count: 9,
        mediaType: ["image", "video"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          for (let i = 0; i < res.tempFiles.length; i++) {
            uni.uploadFile({
              url: base.baseUrl + "/upload/image",
              name: "file",
              filePath: res.tempFiles[i].tempFilePath,
              method: "POST",
              header: {
                Authorization: uni.getStorageSync("token"),
              },
              success: async (res) => {
                // console.log(JSON.parse(res.data).data);
                // console.log();
                let url = JSON.parse(res.data).data.url;
                // console.log(that.changeInfo, "that.changeInfo");
                that.changeInfo.uavatar = url;
                // /* 修改信息 */
                await that.setUserInfoAction(that.changeInfo);
                /* 获取最新信息 */
                await that.wxGetUserInfo();
              },
              fail: (err) => {
                console.log(err);
              },
            });
          }
        },
      });
    },
    blur(e) {
      this.nameShow = !this.nameShow;
	  
	  /* 为空return*/
      if (!e.detail.value.trim()) {
        return;
      }
	  /* */
      this.changeInfo.unickname = e.detail.value.trim();
      this.changeInfo.userid = uni.getStorageSync("userInfo").userid;
      /* 修改信息 */
      this.setUserInfoAction(this.changeInfo);

      let obj = uni.getStorageSync("userInfo");
      obj.unickname = this.changeInfo.unickname;
      console.log(obj);
      uni.setStorageSync("userInfo", obj);

      this.userInfo.unickname = this.changeInfo.unickname;
      /* 获取最新信息 */
      // this.wxGetUserInfo();
    },
    changeName() {
      this.nameShow = !this.nameShow;
      // uni.showKeyboard();
    },
    changeSex() {
      this.show = !this.show;
    },
    cancel() {},
    changeBrith() {
      this.show2 = !this.show2;
    },
    confirmSex(e) {
      this.show = false;
      console.log(this.show, "this.show");
      if (e.value[0] === "男") {
        this.changeInfo.usex = "男";
      } else if (e.value[0] === "女") {
        this.changeInfo.usex = "女";
      }
      this.setUserInfoAction(this.changeInfo);
      /* 获取最新信息 */
      this.wxGetUserInfo();
      console.log(e, "e");
    },
    cancelSex() {
      this.show = false;
    },
    confirmDate(e) {
      this.show2 = false;
      const timeFormat = uni.$u.timeFormat;
      this.changeInfo.ubirthday = e.value;
      this.setUserInfoAction(this.changeInfo);
      /* 获取最新信息 */
      this.wxGetUserInfo();
      console.log(timeFormat(e.value, "yyyy-mm-dd"));
      // console.log(timeFormat(e.value, 'yyyy-mm'))
    },
    cancelDate() {
      this.show2 = false;
    },
    changePhone() {
      uni.chooseImage({
        success() {},
      });
    },
  },
  onShow() {
    this.imgData = getApp().globalData.img;
    // this.changeInfo = this.userInfo;
    // console.log(this.userInfo, "this.userInfo");
  },
  computed: {
    ...mapState("m_userInfo", ["userInfo"]),
  },
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8 !important;
}

.wrap {
  background-color: #fff;
  border-radius: 10rpx;
}

.ml26 {
  margin-left: 26rpx;
}

.mr23 {
  margin-right: 23rpx;
}

.item {
  padding-top: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 80rpx;
}

.left {
  // width: 128rpx;
  width: 150rpx;
}

.right .msg {
  margin-right: 20rpx;
}
</style>